<template>
	<view class="flex-center">
		<view class="loading-container">
		   <view class="loading-circle" v-for="index in 3" :key="index"></view>
		 </view>
	</view>
</template>

<script>
</script>

<style scoped>
	.loading-container {
	  position: relative;
	  width: 80px;
	  height: 80px;
	}
	
	.loading-circle {
	  position: absolute;
	  width: 15px;
	  height: 15px;
	  /* background-color: #ccc; */
	  border: 1px solid #999;
	  border-radius: 50%;
	  animation: move-triangle 1.5s infinite;
	}
	
	/* 定义三个圆圈的起始位置 */
	.loading-circle:nth-child(1) {
	  top: 0;
	  left: 50%;
	  transform: translateX(-50%);
	  animation-delay: 0s;
	}
	
	.loading-circle:nth-child(2) {
	  bottom: 0;
	  left: 0;
	  transform: translateX(-50%);
	  animation-delay: 0.5s;
	}
	
	.loading-circle:nth-child(3) {
	  bottom: 0;
	  right: 0;
	  transform: translateX(50%);
	  animation-delay: 1s;
	}
	
	/* 圆圈沿着三角形路径移动 */
	@keyframes move-triangle {
	  0% {
	    transform: translateX(-50%);
	  }
	  33% {
	    transform: translate(100%, 100%);
	  }
	  66% {
	    transform: translate(-100%, 100%);
	  }
	  100% {
	    transform: translateX(-50%);
	  }
	}
	
</style>